const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: path.join(__dirname, './src/main.js'),//入口，表示要使用webpack打包哪个文件
    output: {
        path: path.join(__dirname, './dist'),//指定打包好的文件输出到那个目录中去
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({  //创建一个 在内存中 生成HTML 页面的插件
            template: path.join(__dirname, './src/index.html'),//指定模板页面，将来会更具指定的页面路径去去生成内存中的页面
            filename: 'index.html' //指定内存里面生成的页面的名称
        })
    ],
    module:{//这个节点，用于配置所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {
                test:/\.css$/,
                use:['style-loader','css-loader']//配置处理.css文件的第三方loader规则,从右向左调用loader
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test:/\.(jpg|png|gif|bmp|jpeg)$/,
                use:['url-loader?limit=7631&name=[hash:8]-[name].[ext]']
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                use:['url-loader']
            },//处理字体文件规则
            {
                test:/\.js$/,
                use:'babel-loader',exclude:/node_modules/
            },//配置babel来转换高级的es语法
            {
                test:/\.vue$/,
                use:'vue-loader'
            }//处理 .vue文件的
        ]
    },
    resolve: {
        alias: {
            // "vue$":"vue/dist/vue.js"
        }
    }
}
